<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../../layuiAdmin/layui/css/layui.css" media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
  <style>
    .margin-top {
      margin-top: 20px;
    }

    .h1 {
      font-size: 20px;
      /* padding-left: 50px; */
    }

    .layui-form-label {
      white-space: nowrap;
      width: auto !important;
    }

    .height {
      height: 20px;
    }
  </style>
</head>


<body>

  <div class="layui-fluid">
    <div class="layui-card margin-top">
      <!-- layui-card-body -->
      <div class="height"></div>
      <div class="">
        <form class="layui-form" action="">
          <!-- 行 -->
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">检查日期</label>
              <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="date" id="date1" autocomplete="off" class="layui-input">
              </div>
              <div class="layui-form-mid">-</div>
              <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="date" id="date" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <label for="" class="layui-form-label">部门:</label>
              <div class="layui-input-inline">
                <select name="modules" lay-verify="required" lay-search="">
                  <option value="">请选择</option>
                  <option value="1">五矿</option>
                  <option value="1">采煤战线</option>
                </select>
              </div>
            </div>
            <div class="layui-inline">
              <div class="layui-inline">
                <input type="radio" id="a" name="like1[write]" lay-skin="primary" title="本部门" checked="">
              </div>
              <div class="layui-inline">

                <input type="radio" id="a" name="like1[write]" lay-skin="primary" title="本部门及下级部门" checked="">
              </div>
            </div>
            <!--  -->
            <div class="layui-inline">
              <label for="" class="layui-form-label">专业</label>
              <div class="layui-input-inline">
                <input type="text" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <button type="button" class="layui-btn layui-btn-sm">
                <i class="layui-icon">&#xe615;</i> 查询
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
    <div class="layui-card">
      <div class="layui-card-header">风险累计数量</div>
      <div class="layui-card-body">
        <div id="EchartZhu" style="width: 100%;height: 500px;"> </div>
      </div>
    </div>
  </div>
  <script src="../../layuiAdmin/layui/layui.all.js" charset="utf-8"></script>
  <!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

  <script>

    layui.config({
      base: '/layuiAdmin/lib/extend/' //这个就是你放Echart.js的目录
    }).use(['form', 'table', 'echarts'], function () {
      var form = layui.form
        , $ = layui.jquery
        , echarts = layui.echarts
      var chartZhu = echarts.init(document.getElementById('EchartZhu'))
      var data = [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73], ["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22", 128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], ["2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29", 85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], ["2000-07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 72], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], ["2000-07-10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], ["2000-07-17", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], ["2000-07-21", 111], ["2000-07-22", 57], ["2000-07-23", 55], ["2000-07-24", 60]];

      var dateList = data.map(function (item) {
        return item[0];
      });
      var valueList = data.map(function (item) {
        return item[1];
      });
      //指定图表配置项和数据
      var option = {

        // Make gradient line here
        visualMap: [{
          show: false,
          type: 'continuous',
          seriesIndex: 0,
          min: 0,
          max: 400
        }, {
          show: false,
          type: 'continuous',
          seriesIndex: 1,
          dimension: 0,
          min: 0,
          max: dateList.length - 1
        }],


        title: [{
          left: 'center',
          text: 'Gradient along the y axis'
        }, {
          top: '55%',
          left: 'center',
          text: 'Gradient along the x axis'
        }],
        tooltip: {
          trigger: 'axis'
        },
        xAxis: [{
          data: dateList
        }, {
          data: dateList,
          gridIndex: 1
        }],
        yAxis: [{
        }, {
          gridIndex: 1
        }],
        grid: [{
          bottom: '60%'
        }, {
          top: '60%'
        }],
        series: [{
          type: 'line',
          showSymbol: false,
          data: valueList
        }, {
          type: 'line',
          showSymbol: false,
          data: valueList,
          xAxisIndex: 1,
          yAxisIndex: 1
        }]
      };;
      chartZhu.setOption(option, true);
    });
  </script>
</body>

</html>